<template>
  <div>
    <div class="header">
      <div class="header_left">
        <div class="photo">
          <img src="../../../src/assets/QQ图片20230203143619.jpg" alt="" />
        </div>
        <div class="info">
          <div class="idcard">{{ idShow }}</div>
          <div class="username">
            {{ username }}
          </div>
          <div class="age">
            {{ age }}
          </div>
        </div>
      </div>
      <div class="header_right">
        <div class="top">
          <van-icon name="service-o" />&nbsp;&nbsp;&nbsp;&nbsp;
          <van-icon name="setting-o" />
        </div>
        <div class="bottom">
          <div class="health">
            <van-icon name="shield-o" />
            家人健康档案
          </div>
        </div>
      </div>
    </div>
    <div class="personInfo">
      <div class="basis">
        <van-cell title="个人信息" is-link value="去完善" @click="toJumpP">
          <template #icon>
            <svg class="icon-font">
              <use xlink:href="#icon-xinshuaijianceyi"></use>
            </svg>
            <!-- <i class="iconfont icon-xinshuaijianceyi"></i> -->
          </template>
        </van-cell>
      </div>
      <div class="assessment">
        <van-cell title="健康评估" is-link value="去完善" @click="toJumpA">
          <template #icon>
            <svg class="icon-font">
              <use xlink:href="#icon-S_jiankangpinggu"></use>
            </svg>
          </template>
        </van-cell>
      </div>
      <div class="history">
        <van-cell title="健康目标" is-link value="去完善" @click="toJumpH">
          <template #icon>
            <svg class="icon-font">
              <use xlink:href="#icon-he_60renwuzhibiao"></use>
            </svg>
          </template>
        </van-cell>
      </div>
      <div class="monitoring" @click="toJumpM">
        <van-cell title="实时监测" is-link value="去完善">
          <template #icon>
            <svg class="icon-font">
              <use xlink:href="#icon-gerenxinxi"></use>
            </svg>
          </template>
        </van-cell>
      </div>
      <div class="shopping">
        <van-cell title="糖友商城" is-link value="去完善">
          <template #icon>
            <svg class="icon-font">
              <use xlink:href="#icon-icon-test"></use>
            </svg>
          </template>
        </van-cell>
      </div>
    </div>
    <div class="circle">
      <van-tabs v-model="active">
        <van-tab class="video" title="我的好友">
          <div class="firends">
            <div class="left">
              <img src="../../assets/QQ图片20230203143619.jpg" alt="" />
            </div>
            <div class="right">
              <div class="top">
                白小亮
                <span
                  style="
                    margin-left: 5px;
                    border-radius: 3px;
                    border: 2px solid orangered;
                    color: orangered;
                  "
                >
                  好友
                </span>
              </div>
              <div class="bottom">发表于2023年2月6日</div>
            </div>
          </div>
          <video
            src="http://124.223.22.76/清华副教授的开学演讲.mp4"
            muted
            width="350px"
            controls
          ></video>
          <van-field
            style="padding-right: 50px"
            v-model="message"
            rows="1"
            autosize
            label="留言"
            type="textarea"
            placeholder="请输入留言"
            right-icon="chat-o"
          >
            <template #button>
              <div>发送</div>
            </template>
          </van-field>
        </van-tab>
        <van-tab class="video" title="糖友圈">
          <div class="firends">
            <div class="left">
              <img src="../../assets/QQ图片20230203143619.jpg" alt="" />
            </div>
            <div class="right">
              <div class="top">白小亮</div>
              <div class="bottom">评论了白小龙的视频</div>
            </div>
          </div>
          <video
            src="http://124.223.22.76/清华副教授的开学演讲.mp4"
            muted
            width="350px"
            controls
          ></video>
        </van-tab>

        <van-tab class="video" title="我的动态">
          <div class="firends">
            <div class="left">
              <img src="../../assets/QQ图片20230203143619.jpg" alt="" />
            </div>
            <div class="right">
              <div class="top">白小龙</div>
              <div class="bottom">2月6日发表了视频 仅好友可见</div>
            </div>
          </div>
          <video
            src="http://124.223.22.76/清华副教授的开学演讲.mp4"
            muted
            width="350px"
            controls
          ></video>
          <div class="mineDy">
            <van-field
              class="dynamic"
              v-model="message"
              rows="1"
              autosize
              label="留言"
              type="textarea"
              placeholder="请输入留言"
            />
            <van-icon
              ref="praise"
              @click="handler"
              name="like-o"
              style="margin-right: 5px"
            />
            <van-icon
              name="star-o"
              @click="handler"
              style="margin-right: 5px"
            />
            <van-icon name="share-o" style="padding-right: 50px" />
          </div>
        </van-tab>
      </van-tabs>
      <div style="height: 50px"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      idcard: "142325197806055546",
      username: "白小龙",
      age: 22,
      active: 0,
      message: "",
    };
  },
  computed: {
    idShow() {
      return (
        this.idcard.substr(0, 4) +
        "*****" +
        this.idcard.substr(this.idcard.length - 5)
      );
    },
  },
  methods: {
    handler(event) {
      // event.target.style.backgroundColor='red'
    },
    // 跳转到个人信息页面
    toJumpP() {
      this.$router.push({
        path: "personal",
      });
    },
    // 跳转到健康评估页面
    toJumpA() {
      this.$router.push({
        path: "assessment",
      });
    },
    // 跳转到健康目标页面
    toJumpH(){
      this.$router.push({
        path: "history",
      });
    },
    // 跳转到实时监测页面
    toJumpM(){
      this.$router.push({
        path: "equipment",
      });
    },
  },
};
</script>
<style lang="less" scoped>
@font-face {
  font-family: "ZoomlaHaihunhou-A055"; /*逐浪海昏侯汉简隶书*/
  src: url("https://code.z01.com/font/ZoomlaHaihunhou-A055.eot?#iefix"); /* IE9 */
  src: url("https://code.z01.com/font/ZoomlaHaihunhou-A055.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("https://code.z01.com/font/ZoomlaHaihunhou-A055.woff")
      format("woff"),
    /* chrome、firefox */
      url("https://code.z01.com/font/ZoomlaHaihunhou-A055.ttf")
      format("truetype"),
    /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
      url("https://code.z01.com/font/ZoomlaHaihunhou-A055.svg#ZoomlaHaihunhou-A055")
      format("svg"); /* iOS 4.1- */
  font-style: normal;
  font-weight: normal;
}
.header {
  width: 100%;
  
  font-family: "ZoomlaHaihunhou-A055";
  height: 150px;
  background-color: @blue;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .header_right {
    padding-right: 20px;
    display: flex;
    flex-direction: column;

    color: white;
    .top {
      font-size: 16px;
      margin-left: 60px;
    }
    .bottom {
      margin-top: 45px;
      .health {
        cursor: pointer;
        width: 130px;
        border: 2px solid white;
        border-radius: 8px;
        text-align: center;
        line-height: 20px;
      }
    }
  }
  .header_left {
    display: flex;
    align-items: center;
    padding-left: 20px;
    .info {
      color: white;

      display: flex;
      flex-direction: column;
      font-size: 16px;
      margin-left: 10px;
      .idcard {
        margin-bottom: 10px;
      }
      .username {
        margin-bottom: 10px;
        text-align: center;
      }
      .age {
        text-align: center;
      }
    }
    .photo {
      width: 100px;
      height: 100px;
      border-radius: 50%;

      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
    }
  }
}
.personInfo {
  margin-top: 20px;
  width: 90%;
  // height: 350px;
  background-color: red;
  margin-left: 5%;
  box-shadow: 5px 5px 5px #ccc;
  .van-cell {
    border-bottom: 1px solid #eff4f8;
    svg {
      margin-top: 5px;
      margin-right: 5px;
      width: 16px;
      height: 16px;
      text-align: center;
      line-height: 16px;
    }
    .iconfont {
      margin-right: 5px;
    }
  }
}
.circle {
  width: 90%;
  margin-left: 5%;
  .video {
    .firends {
      display: flex;
      .left {
        margin: 10px 0 0 10px;
        img {
          width: 40px;
          border-radius: 50%;
        }
      }
      .right {
        margin-top: 10px;
        height: 30px;
        font-size: 12px;
        // line-height:30px;
        margin-left: 25px;
        .top {
          margin-bottom: 8px;
        }
      }
    }
    video {
      margin-top: 20px;
      margin-left: -15px;
    }
  }
  .van-tab__pane {
    margin-left: 20px;
  }
}
.dynamic {
  width: 80%;
  margin-left: 6px;
}
.mineDy {
  display: flex;
  align-items: center;
}
</style>